<template>
  <div id="app"
       :style="{ 'width': standardWidth, '-moz-transform': 'scale(' + scale + ')', '-o-transform': 'scale(' + scale + ')', 'zoom': scale }">
    <div class="head" v-show="isShowHeader">
      <navigation/>
    </div>
    <div class="main">
      <router-view/>
    </div>
  </div>
</template>

<script>
  import navigation from '@/components/navigation-bars';

  export default {
    name: 'App',
    data() {
      return {
        standardWidth: 1366,
        scale: '',
        isShowHeader: false,
      }
    },
    watch: {
      $route() {
        let thisRoure = this.$route.name;
        if (thisRoure == 'Login') {
          this.isShowHeader = false
        } else if (thisRoure == 'ForgetPassword') {
          this.isShowHeader = false
        }else if(thisRoure == 'Register'){
          this.isShowHeader = false
        }else if(thisRoure=='RegisterForm'){
          this.isShowHeader = false
        }
        else if(thisRoure=='RegisterType'){
          this.isShowHeader = false
        }else if(thisRoure=='RegisterSuccess'){
          this.isShowHeader = false
        }else if(thisRoure=='RegisterForm'){
          this.isShowHeader = false
        }else {
          let userInfo=this.$store.state.userInfo.userId;
          if(userInfo){
            this.isShowHeader = true
          }else {
            this.$message.error('未登录，请重新登录');
            this.$router.push({path: '/login'});
          }
        }
      }
    },
    components: {
      navigation,
    },
    created(){
        let userInfo=this.$store.state.userInfo.userId;
        if(userInfo){
          this.isShowHeader = true
        }else {
          this.$message.error('未登录，请重新登录');
          this.$router.push({path: '/login'});
        }
    },
    mounted() {
      var _this = this;
      window.onresize = function () {
          _this.AutoSize();
      };
      this.AutoSize();
    },
    methods: {
      AutoSize() {
        var clientWidth = document.documentElement.clientWidth;
        if (clientWidth > this.standardWidth) {
          this.scale = 'normal';
        } else {
          var clientHeight = document.documentElement.clientHeight;
          this.scale = clientWidth / this.standardWidth;
        }
      }
    }
  }
</script>

<style lang='scss' scoped type="text/scss">
  @import '@/assets/css/variables.scss'; //主色调
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    height: 100%;
    // min-width:1366px;
    overflow: hidden;
    background-color: $c-bg;
    display: flex;
    flex-direction: column;

    .head {
      height: 72px;
    }

    .main {
      /*flex:1;*/
      height: calc(100% - 72px);
    }
  }
</style>
